<template>
	<view style="height: 100%;" class="flex flex-dir-c">
		<u-tabs-swiper barWidth="60" name="name" active-color="#22BE6A" inactive-color="#666666" bg-color="none"
			ref="tabs1" :list="inits.tabs" :current="inits.current" @change="tabsChange" :is-scroll="false"
			swiperWidth="750"></u-tabs-swiper>
		<swiper :current="inits.swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in inits.tabs" :key="index">
				<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
					<view class="list" v-for="(item2,i) in inits.list" :key="item2.id">
						<view class="flex flex-jc-sb">
							<view class="flex flex-ai-c">
								<i-icon icon="icon-jiudian2" type="m" color="#FF7612" size="38rpx" class="mr-15" />
								{{item2.hotel_name}}
							</view>
							<view :style="{'color': [0,1].includes(item2.order_status)?'#009943':'#FE2600'}">
								{{filterState(item2.order_status)}}
							</view>
						</view>
						<view class="flex flex-jc-sb font-bold font-32 mt-30 mb_20">
							<view>{{item2.hotel_address}}</view>
							<view>￥{{item2.total_price}}</view>
						</view>
						<view style="color: #666666;" class="font-24">{{item2.check_in_time}}(入住){{item2.leave_time}}(离店)
							{{item2.reserve_day}}晚上/{{item2.reserve_room_num}}间</view>
						<view style="color: #666666;" class="font-24 mt-15 mb_15">{{item2.room_name}}</view>
						<view v-if="item2.order_status == 0" class="count-down font-24 flex flex-ai-c">
							<i-icon icon="time" size="24rpx" type="b" style="margin: 7rpx 10rpx 0 22rpx;" />
							剩余支付时间：<u-count-down :timestamp="item2.timestamp" format="mm分钟ss秒"
								style="color: #FE594B;"></u-count-down>
						</view>

						<view class="btn flex flex-ai-c flex-jc-fe">
							<view v-if="item2.order_status == 0" class="flex flex-ai-c flex-jc-fe">
								<view class="btn-text" @click="orderEvent(0,item2.id)">取消订单</view>
								<view class="btn-text ml-15" style="background: #FF5347;border: none;color: #fff;"
									@click="orderEvent(1,item2.id)">去支付</view>
							</view>
							<view v-else class="flex">
								<view v-if="item2.order_status == 1" class="btn-text" @click="orderEvent(0,item2.id)">
									取消订单</view>
								<view v-if="[5,6,7].includes(item2.order_status)" class="btn-text ml-15"
									@click="orderEvent(2,item2.id)">删除订单</view>
								<view class="btn-text ml-15" @click="orderEvent(3,item2)">再次预定</view>
							</view>

						</view>
					</view>
					<u-loadmore bg-color="none" :status="inits.loadStatus" @loadmore="loadmore"
						v-if="inits.list.length"></u-loadmore>
					<view class="def" v-else>
						<view style="margin: 120rpx 0 80rpx 0;text-align: center;">您目前没有开订单记录</view>
						<view class="def-btn" style="margin-left: 57rpx;" @click="applyNow">开始预定</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive, ref, watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import hotel from '../../api/hotel.js';
	let tabs1 = ref()
	const inits = reactive({
		swiperCurrent: 0,
		current: 0,
		tabs: [
			{
				name: '全部订单',
				v: -1
			},
			{
				name: '待付款',
				v: 0
			},
			{
				name: '待确认',
				v: 1
			},
			{
				name: '待入住',
				v: 2
			},
			{
				name: '入住中',
				v: 3
			},
			{
				name: '已完成',
				v: 4
			},
			{
				name: '已取消',
				v: 7
			},
		],
		page: 1,
		loadStatus: '',
		list: []
	})
	watch(() => inits.swiperCurrent, () => {
		reset()
	})
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
	const orderEvent = async (v : number, id : any) => {
		let res = null
		switch (Number(v)) {
			case 0:	//取消
				res = await hotel.roomReserveOrderCancel({
					order_id: id
				})
				if (res.code === 200) {
					showMsg('取消成功')
					reset()
				}
				break
			case 1:	//支付
				res = await hotel.pay({
					order_id: id
				})
				if (res.code === 200) {
					uni.requestOrderPayment({
						...res.data.payRes,
						success() {
							showMsg('支付成功')
							reset()
						},
						fail(err2) {
							if (err2.errMsg === 'requestPayment:fail cancel') {
								showMsg('您已取消支付')
							} else {
								showMsg('支付失败')
							}
						}
					})
				}
				break
			case 2: //删除
				res = await hotel.roomReserveOrderDel({
					order_id: id
				})
				if (res.code === 200) {
					showMsg('删除成功')
					reset()
				}
				break
			case 3: //再次
				uni.navigateTo({
					url: `/pages/hotel/details/index?id=${id.hotel_id}`
				})
				break
		}
	}
	const filterState = (v) => {
		let text = ''

		switch (Number(v)) {
			case 0:
				text = '等待支付'
				break
			case 1:
				text = '待确认'
				break
			case 2:
				text = '待入住'
				break
			case 3:
				text = '入住中'
				break
			case 4:
				text = '已完成'
				break
			case 5:
				text = '已退款(超时)'
				break
			case 6:
				text = '已退款(拒绝)'
				break
			case 7:
				text = '已取消'
				break
		}
		return text
	}
	const loadmore = () => {
		if (inits.loadStatus == 'nomore') return
		getMemberOrderList()
	}
	const reset = () => {
		inits.list = []
		inits.page = 1
		getMemberOrderList()
	}
	const getMemberOrderList = async () => {
		const res = await hotel.getRoomReserveOrderList({
			page: inits.page,
			size: 10,
			status: inits.tabs[inits.swiperCurrent].v
		})
		res.data.map(v => {
			v.timestamp = differenceTime(v.createtime || 0) * 1000
		})
		inits.list = [...inits.list, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		inits.page += 1 // 当前页加1
	}
	const moreStatus = (status : string) => {
		inits.loadStatus = status
	}
	const applyNow = () => {
		uni.switchTab({
			url: '/pages/tabs/schedule'
		})
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		inits.swiperCurrent = index;
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		inits.swiperCurrent = current2;
		inits.current = current2;
	}
	const differenceTime = (time : any) => {
		// @ts-ignore
		let timestamp : any = (Date.parse(new Date())) / 1000; //计算当前时间戳
		// @ts-ignore
		let pastTime : any = (Date.parse(new Date(time))) / 1000 //创建时间
		let endtime = pastTime + 1800
		return endtime > timestamp ? endtime - timestamp : 0
	}
	onLoad((op) => {
		getMemberOrderList()
	})
</script>
<style>
	page {
		height: 100%;
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-tabs-item) {
		color: #000 !important;
	}

	.list {
		padding: 38rpx 28rpx 0 28rpx;
		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx;

		.count-down {
			height: 54rpx;
			background: linear-gradient(270deg, #FDFDFD 0%, #F8F8F8 100%);
			line-height: 54rpx;
			color: #666666;
		}

		.btn {
			padding: 30rpx 0 38rpx 0;
		}

		.btn-text {
			width: 142rpx;
			height: 58rpx;
			border-radius: 29rpx;
			text-align: center;
			line-height: 58rpx;
			font-size: 24rpx;
			border: 1rpx solid #999999;
		}
	}

	.def {
		width: 654rpx;
		height: 393rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 3rpx rgba(225, 225, 225, 0.5);
		border: 2rpx solid #EEEFF0;
		position: absolute;
		top: 200rpx;
		left: 48rpx;

		.def-btn {
			text-align: center;
			width: 544rpx;
			height: 92rpx;
			background: #009943;
			line-height: 92rpx;
			color: #fff;
		}
	}
</style>